<template>
    <div id="mygetter">
        <h3>使用MyMutations</h3>
        <!-- <button @click="clickAdd()">点击++</button> -->
        <h3>{{$store.state.count}}</h3>
        <button @click="add()">触发add</button>
        <button @click="myadd()">触发myadd</button>
        <button @click="mytwo(3)">+3</button>
        <button @click="myasync()">触发异步</button>
    </div>
</template>
<script>
    import {mapGetters, mapMutations,mapActions} from 'vuex'

    export default {
        data(){
            return{
                
            }
        },
        computed:{
            //对象展开符 解构mapGetters
            ...mapGetters({
                //将store中的getters的filterInfo 
                //映射到组件上的info计算属性上
                info:"filterInfo"
            }),
            ...mapGetters([//字符串数组
                "getInfoLength"
            ])
        },
        methods:{
            //之前的方法
            // clickAdd(){
            //     this.$store.commit('add');
            // },
            //字符串数组的用法
            ...mapMutations([
                "add"
            ]),
            //对象写法
            ...mapMutations({
                //同步,通过commit触发mutations
                myadd:"add",
                mytwo:"myadd"
            }),
            //触发actions
            // myasync(){
            //     this.$store.dispatch("asyncAdd");
            // },
            ...mapActions({
                myasync:"asyncAdd"
            })
        }
    }
</script>

<style>
    #mygetter{
        border: 1px solid blue;margin-top: 10px;
    }
    button{
        margin-left:20px;
    }
</style>